<template>
  <view style="height: 100%;" >
    <!-- 使用 @load 和 @error 事件来处理图片加载成功和失败  mode="aspectFill"  widthFix  aspectFit-->
    <image :src="imageUrl" @load="handleImageLoad" @error="handleImageError"
           mode='widthFix'
            class="uniImage"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultImageUrl: '/static/images/error/error.png',
      imageUrl: '', // 初始值为空
    };
  },
  props: {
    src: {
      type: String,
      default: () => {
        return ""
      }
    }
  },
  mounted() {
    this.imageUrl = this.src || this.defaultImageUrl
  },
  methods: {

    getOnLoadImage(){
      this.imageUrl = this.src || this.defaultImageUrl
    },

    handleImageLoad() {
      // 图片加载成功，可以在这里处理一些逻辑
    },
    handleImageError() {
      // 图片加载失败或imageUrl为空，切换到默认图片
      this.imageUrl = this.defaultImageUrl;
    },
  },
  created() {
    // 在组件创建时调用异步请求方法
    // this.fetchImage();
  },
};
</script>
<style>

.uniImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 1;
}

</style>
